<template>
  <div class="detail-body-main">
    <div class="main-head" @click="toggleMainBody">
      <el-icon><ArrowDown /></el-icon>
      <div style="margin-left: 8px">系统信息</div>
    </div>
    <div :class="{ 'main-body': isToggleMainBody }" v-if="isToggleMainBody">
      <el-form :label-position="right" class="el-form--flex" :model="data">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label-position="right">
              <template #label>
                <div style="width: 100px">
                  <span>负责人</span>
                </div>
              </template>
              <div class="item-value">
                <div class="item-value-text">
                  <span>{{ data.ownerUserName }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-position="right">
              <template #label>
                <div style="width: 100px">
                  <span>最后跟进记录</span>
                </div>
              </template>
              <div class="item-value">
                <div class="item-value-text">
                  <span>{{ data.lastContent }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label-position="right">
              <template #label>
                <div style="width: 100px">
                  <span>创建人</span>
                </div>
              </template>
              <div class="item-value">
                <div class="item-value-text">
                  <span>{{ data.createUserName }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-position="right">
              <template #label>
                <div style="width: 100px">
                  <span>创建时间</span>
                </div>
              </template>
              <div class="item-value">
                <div class="item-value-text">
                  <span>{{ data.createTime }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label-position="right">
              <template #label>
                <div style="width: 100px">
                  <span>更新时间</span>
                </div>
              </template>
              <div class="item-value">
                <div class="item-value-text">
                  <span>{{ data.updateTime }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-position="right">
              <template #label>
                <div style="width: 100px">
                  <span>最后跟进时间</span>
                </div>
              </template>
              <div class="item-value">
                <div class="item-value-text">
                  <span>{{ data.lastTime }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
console.log(props.data)
const isToggleMainBody = ref(true)

function toggleMainBody() {
  isToggleMainBody.value = !isToggleMainBody.value
}
</script>
<style scoped>
.detail-body-main {
  height: auto;
  margin: 16px 8px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 8px #172b4d1a;
  overflow: hidden;
}

.main-head {
  display: flex;
  padding: 16px;
  background-color: #fafbfc;
  align-items: center;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.el-form--flex.el-form {
  margin: 16px 0 0;
}

.item-value {
  align-items: center;
  width: 480px;
  display: flex;
  line-height: 32px;
  justify-content: space-between;
  background-color: #ebecf0;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  min-height: 32px;
  padding: 0px 6px;
}

:deep(.el-form--flex .el-form-item .el-form-item__label) {
  color: #42526e;
  height: auto;
  line-height: 1.2 !important;
  min-height: 32px;
  padding-top: 8px;
  text-align: right;
}

.item-value .el-icon {
  opacity: 0;
  transition: opacity 0.2s;
}

.item-value:hover .el-icon {
  opacity: 1;
}
</style>
